<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表表格表单</title>
</head>

<body>
    <strong>列表</strong><br>
    <p><strong>unorderedList</strong>无序列表是ul嵌套li, ul里面只能包裹li标签</p>
    <ul>
        <li>第1项</li>
        <li>第2项</li>
    </ul>

    <p><strong>orderedList</strong>有序列表是ol嵌套li</p>
    <ol>
        <li>步骤1</li>
        <li>步骤2</li>
    </ol>

    <p><strong>defineList</strong>定义列表是dl嵌套dt和dd</p>
    <dl>
        <dt>服务中心</dt>
        <dd>申请售后</dd>
        <dd>服务详情</dd>
        <dt>服务中心2</dt>
        <dd>申请售后2</dd>
        <dd>服务详情2</dd>
    </dl>

    <br><br><strong>表格</strong><br>
    <p><strong>table</strong>表格是tr-tableRow行嵌套th-tableHeaderCell表头单元格 td-tableDatacell内容单元格</p>
    <p>thead tbody tfoot 表格结构标签,只针对浏览器有用,无实际变化. 阅读代码方便,无用,了解即可</p>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>

        <tr>
            <td>张三</td>
            <td>99</td>
            <td>99</td>
            <td>99</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>99</td>
            <td>99</td>
            <td>99</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>全市第一</td>
            <td>全市第一</td>
            <td>全市第一</td>
        </tr>
    </table>

    <p>合并单元格保留最左最上的单元格: 跨行合并添加rowspan 跨列合并colspan 取值是数字,表示合并的单元格数量</p>
    <p>合并单元格不能跨结构合并 如thead tbody tfoot</p>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>

        <tr>
            <td>张三</td>
            <td>99</td>
            <td rowspan="2">99</td>
            <td>99</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>99</td>
            <!--<td>99</td>-->
            <td>99</td>
        </tr>
        <tr>
            <td>总结</td>
            <td colspan="3">全市第一</td>
            <!--<td>全市第一</td>-->
            <!--<td>全市第一</td>-->
        </tr>
    </table>


    <br><br><strong>表单:收集信息</strong><br>
    <p>input</p>
    type属性 text单行文本框;password密码框;radio单选框;checkbox多选框;file文件上传<br>
    placeholder 占位符<br>
    text文本框:<input type="text" placeholder="请输入用户名"><br>
    password密码框:<input type="password" placeholder=""><br>
    radio单选框: name属性实现单选功能 checked默认选择 <input type="radio" name="gender" checked>男<input type="radio" name="gender">女<br>
    checkbox多选框: checked默认选中功能<input type="checkbox" checked><input type="checkbox">
    <br>
    file上传文件: multiple属性可支持上传多个<input type="file" multiple><br>

</body>

</html>